import { Container, Box } from "./styled";
import MDEditor from "@uiw/react-md-editor";
import Title from "../Title";
import { useState } from "react";
import { QuestionProps } from "@/api/question";
import MarkDownComponent from "../markdown";

const ShortAnswer = ({ index, data, handleCheck, value }: QuestionProps) => {
  const { type, question, description } = data;
  const handleChange = (val: any) => {
    handleCheck(val);
  };
  return (
    <Container>
      <Title type={type} index={index} title={question} />
      {description && <MarkDownComponent text={description} />}
      <Box>
        <MDEditor
          value={value as string}
          height="350px"
          onChange={handleChange}
        />
        {/* <MDEditor.Markdown source={value} style={{ whiteSpace: "pre-wrap" }} /> */}
      </Box>
    </Container>
  );
};

export default ShortAnswer;
